<template>
  <div class="login">
    <el-card class="card" shadow="hover">
      <h3>用户登录</h3>
      <el-form
          ref="form"
          :model="user"
          label-width="60px"
          label-position="left"
      >
        <el-form-item label="用户名">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="login">登录</el-button>
      <el-button type="success" @click="registerDialogVisible = true"
      >注册</el-button
      >
    </el-card>
    <!--用户注册对话框-->
    <el-dialog
        title="用户注册"
        v-model="registerDialogVisible"
        @close="cancel"
    >
      <el-form :model="registerUser" label-width="60px" ref="registerRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerUser.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerUser.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="registerUser.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="registerUser.telephone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="commit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { userRegister, userLogin } from '../services/User.ts';
import {AxiosResponse} from "axios";
import router from "../router";

interface User {
  username: string;
  password: string;
}

interface RegisterUser extends User {
  name: string;
  telephone: string;
}

interface LoginForm {
  user: User;
  registerDialogVisible: boolean;
  registerUser: RegisterUser;
  login: () => void;
  commit: () => void;
  cancel: () => void;
}

export default defineComponent({
  name: 'Login',

  setup() {
    const form = ref<any | null>(null);
    const registerRef = ref<any | null>(null);

    const user: User = reactive({
      username: 'jack',
      password: '1234',
    });

    const registerDialogVisible = ref(false);
    const registerUser: RegisterUser = reactive({
      username: '',
      password: '',
      name: '',
      telephone: '',
    });

    const commit = () => {
      userRegister(registerUser)
          .then((response:AxiosResponse<any>) => {
            const data = response.data;
            if (data.code !== 200) {
              ElMessage.error(data.msg);
            } else {
              registerDialogVisible.value = false;
              registerRef.value?.resetFields();
              ElMessage.success('注册成功');
            }
          })
          .catch((error) => {
            console.log('注册请求发生错误=>', error);
          });
    };

    const cancel = () => {
      registerDialogVisible.value = false;
      registerRef.value?.resetFields();
    };

    const login = () => {
      userLogin(user).then((response) => {
        if (response.data.code === 200) {
          Object.assign(user, response.data.data);
          localStorage.setItem('user', JSON.stringify(user));
          router.push({ path: '/home' ,params: { user: user.username }});
        } else {
          ElMessage.error(response.data.msg);
        }
      });
    };

    return {
      form,
      registerRef,
      user,
      registerDialogVisible,
      registerUser,
      commit,
      cancel,
      login,
    };
  },
});
</script>

<style lang="css" scoped>
.card {
  width: 600px;
  margin: 150px auto;
}
</style>
